<template>
  <div class="storecoupon-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="名称" name="prop">
        <a-input v-model:value="searchParams.prop" placeholder="请输入" />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />
    <recordPop :id="selectId" v-model:visible="isPop" />
    <storecouponDetail v-model:visible="visible" :data="activeRow" @change="search(false)" />
  </div>
</template>

<script setup lang="tsx">
import { storecouponDel, getPageList } from './api';
import type { Istorecoupon } from './entity';
import storecouponDetail from './detail.vue';
import recordPop from './recordPop.vue';
const searchParams = reactive({
  prop: ''
})

let visible = $ref(false)
let selectId = $ref('')
let isPop = $ref(false)
const { tableRef, columns, search } = useTable<Istorecoupon>([
  { title: 'ID', dataIndex: 'id' },
  { title: '名称', dataIndex: 'name' },
  {
    title: '类型', dataIndex: 'useType',
    customRender: ({ record }) => (
      <span>{record.useType}</span>
    )
  },
  { title: '面值', dataIndex: 'money' },
  {
    title: '领取方式', dataIndex: 'name',
    customRender: ({ record }) => (
      <span>{record.type}</span>
    )
  },
  {
    title: '领取日期', dataIndex: 'receiveEndTime',
    customRender: ({ record }) => {
      record.receiveEndTime ? <span>{record.receiveEndTime} - {record.receiveEndTime}</span> : <span>不限时</span>
    }
  },
  {
    title: '使用时间', dataIndex: 'day',
    customRender: ({ record }) => {
      record.day ? <span>{record.day}天</span> : <span>{record.useStartTime} - {record.useEndTime}</span>
    }
  },
  {
    title: '发布数量', dataIndex: 'isLimited',
    customRender: ({ record }) => {
      record.isLimited ? <span>不限量</span> : <span>发布：{record.total} 剩余：{record.lastTotal}</span>
    }
  },
  {
    title: "是否开启",
    dataIndex: "isShow",
    customRender: ({ record }) => (
      <a-switch
        onClick={() => onchangeIsShow(record)}
        v-model:checked={record.status}
        inline-prompt
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    ),
  },
  {
    title: '操作',
    dataIndex: 'op',
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => toRecord(record)}>领取记录</table-button>
        <table-button onClick={() => add(record)}>复制</table-button>
        <confirm-button danger onClick={() => remove(record)}>删除</confirm-button>
      </>
    )
  }
])

let activeRow = $ref<Partial<Istorecoupon>>({})
function add(row: Partial<Istorecoupon> = {}) {
  activeRow = { ...row }
  visible = true
}
function onchangeIsShow(row: any) {

}
function toRecord(row: any) {
  isPop = true
  selectId = row.id
}
function remove({ id }: Istorecoupon) {
  storecouponDel(id as number).then(() => {
    AntMessage.success('已删除')
    search(false)
  })
}
</script>

<style lang="scss"></style>